<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/head :: common_head(~{::title},~{},~{},~{})">
    <title>用户列表</title>
</head>
<body>
<header th:replace="admin/header :: common_header" class="header"></header>

<div class="d-flex align-items-stretch">
    <!-- 左边菜单 -->
    <nav th:replace="admin/menu :: common_menu" id="sidebar"></nav>
    <!-- 内容部分 -->
    <div class="page-content">
        <div class="page-header">
            <div class="container-fluid">
                <h2 class="h5 no-margin-bottom">用户列表</h2>
            </div>
        </div>
        <section class="no-padding-top no-padding-bottom">
            <div class="card">
                <div class="card-header" style="color: #8a8d93; font-size: 16px">用户列表</div>
                <div class="card-body">
                    <nav class="navbar navbar-dark bg-dark ">
                        <a href="#" class="navbar-brand">添加用户</a>
                        <form action="userList" method="post" class="form-inline">
                            <input id="search" name="search" th:value="${search}" class="form-control mr-sm-2"
                                   type="search" placeholder="输入关键字..." aria-label="Search">
                            <button class="btn btn-primary my-2 my-sm-0" type="submit">查询</button>
                        </form>
                    </nav>
                    <table class="table table-striped table-hover">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>用户名称</th>
                            <th>用户昵称</th>
                            <th>联系电话</th>
                            <th>性别</th>
                            <th>邮箱</th>
                            <th>最新登录时间</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:if="${uList.list.size()} eq 0">
                            <td colspan="9">暂无数据</td>
                        </tr>
                        <tr th:each="user,i:${uList.list}">
                            <td th:text="${user.id}"></td>
                            <td th:text="${user.username}"></td>
                            <td th:text="${user.nickname}"></td>
                            <td th:text="${user.phone}"></td>
                            <td th:text="${user.gender}"></td>
                            <td th:text="${user.email}"></td>
                            <td th:text="${user.recentlyLanded}" th:title="${user.recentlyLanded}"></td>
                            <td th:text="${user.createTime}" th:title="${user.createTime}"></td>
                            <td>
                                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#delModal" th:onclick="to('delInput',[[${user.id}]])">删除
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <br>
                    <nav>
                        <ul class="pagination justify-content-end">
                            <li class="page-item"><a class="page-link" th:href="'userList?pageNum=1'">首页</a></li>
                            <li class="page-item"><a class="page-link" th:href="'userList?pageNum='+${uList.prePage}">上一页</a></li>
                            <li class="page-item"><a class="page-link" href="#" th:text="${uList.pageNum}"></a></li>
                            <li class="page-item"><a class="page-link" th:href="'userList?pageNum='+${uList.nextPage}">下一页</a></li>
                            <li class="page-item"><a class="page-link" th:href="'userList?pageNum='+${uList.pages}">尾页</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </section>
        <!-- 版权 -->
        <footer th:replace="admin/footer :: common_footer" class="footer"></footer>
    </div>
</div>
<!-- 删除弹框-->
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="delModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="delModalLabel">删除</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">您确定要删除，不再考虑一下吗？</div>
            <div class="modal-footer">
                <input type="hidden" id="delInput">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="del('userDel','delInput')">确定</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>